<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--发表评价-->
    <view class="mx-4">
      <view class="">
        <view
          class="text-sm text-right text-darkNormal"
          @click="goArticle('commitasset')"
          >规则</view
        >
      </view>
      <view class="flex pb-3">
        <view class=""
          ><u--image
            :src="info.productImg"
            width="160rpx"
            height="160rpx"
            radius="6"
          ></u--image
        ></view>
        <view class="ml-3 w-full">
          <view class="flex justify-between items-center">
            <view class="u-line-1 text-sm leading-6 w-3/4">{{
              info.activityName
            }}</view>
            <view class="leading-10 w-1/4 text-right"
              ><text class="text-sm">￥</text
              ><text class="text-base">0.01</text></view
            >
          </view>
          <view
            class="text-primary text-xs order-btn-border rounded px-2.5 py-1"
            style="display: inline-block"
          >
            满{{ info.orderPrice }}补贴{{ info.subsidyPrice }}
          </view>
        </view>
      </view>
      <view class="flex items-center text-sm leading-8"
        >店铺名称：<u-icon
          name="/static/icons/icon-taobao.png"
          size="32rpx"
          class="mr-1.5"
          v-if="info.storeType == '40'"
        ></u-icon
        ><u-icon
          name="/static/icons/icon-douyin.png"
          size="32rpx"
          class="mr-1.5"
          v-if="info.storeType == '41'"
        ></u-icon
        >{{ info.storeName }}</view
      >
      <view class="flex items-center text-sm leading-8"
        >订单编号：{{ info.buyerOrderNo
        }}<u-icon
          name="/static/icons/icon-copy.png"
          size="36rpx"
          class="ml-1"
          @click="copyCode(info.buyerOrderNo)"
        ></u-icon
      ></view>
      <view class="border-b-grayLight my-2.5"></view>
      <view class="text-sm leading-8">评价建议</view>
      <view class="w-full bg-gray rounded py-2.5">
        <view class="mx-4">
          <view class="text-sm text-primary">发表1-5张图片+文字评价</view>
          <view class="text-xs text-light leading-6"
            >有助于商家提供更优质的产品和服务<br />也能为后续的消费者提供真实的购物参考</view
          >
        </view>
      </view>
      <view class="text-sm leading-10 my-4 flex items-center"
        >上传评价截图<view class="ml-2.5" @click="showGuide(1, 40)"
          ><u-icon
            name="question-circle"
            color="#CCCCCC"
            size="36rpx"
          ></u-icon></view
      ></view>
      <view
        class="flex justify-center mb-5"
        @click="uploadPhoto('shareImg')"
        v-if="shareOrderImgUrl == ''"
      >
        <image class="w-32 h-32" src="/static/icons/icon-photo-add.png" />
      </view>
      <view
        class="flex justify-center mb-5 relative"
        v-else
        @click="uploadPhoto('shareImg')"
      >
        <view
          class="text-center text-white text-sm w-32 h-10 leading-10 button-bg absolute bottom-0 z-10 rounded-b-xl"
          >更换</view
        >
        <image class="w-32 h-32 rounded-xl" :src="shareOrderImgUrl" />
      </view>
    </view>
    <view class="fixed bottom-6 left-24 right-24">
      <view
        class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-primary bg-box-shadow"
        @click="confirmShare(info.id)"
        >提交</view
      >
    </view>
    <!--教程说明-->
    <u-popup
      :show="isGuide"
      @close="isGuide = false"
      mode="center"
      round="15"
      bgColor="#FFEAED"
    >
      <view class="w-72">
        <view
          class="text-center bg-pink text-white text-base rounded-t-md h-10 leading-10"
          >{{ guideTitle }}</view
        >
        <view class="rounded-b-md">
          <view class="mx-4">
            <view class="pt-5">
              <image class="w-full" mode="widthFix" :src="guideImage"></image
            ></view>
            <view class="mx-14 py-5"
              ><view
                class="w-full rounded-full leading-10 text-base h-10 text-center text-white bg-pink"
                @click="isGuide = false"
                >知道了</view
              ></view
            >
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { postFile } from '../../../services/file';
import { addComment, continueOpt, orderList } from '../../services/mine';

export default {
  data() {
    return {
      id: '',
      commentType: 1,
      info: {},
      shareOrderImg: '',
      shareOrderImgUrl: '',
      isGuide: false,
      guideTitle: '',
      guideImage: '',
      privacy: '',
    };
  },
  async created() {
    const { id, commentType } = this.$Route.query;
    this.id = id;
    this.commentType = commentType;
    this.continueTo(id);
  },
  methods: {
    //前往公共文章详情
    goArticle(type) {
      this.$Router.push({
        name: 'article',
        params: {
          type: type,
        },
      });
    },
    //复制活动编号
    copyCode(content) {
      uni.setClipboardData({
        data: content,
        success: function () {
          //console.log('复制成功');
        },
      });
    },
    //显示引导教程
    showGuide(type, mediaType) {
      this.isGuide = true;
      if (type == 1 && mediaType == 40) {
        this.guideTitle = '淘宝评价';
        this.guideImage = '/static/images/evaluateTaobao.png';
      }
      if (type == 1 && mediaType == 41) {
        this.guideTitle = '抖音评价';
        this.guideImage = '/static/images/evaluateDouyin.png';
      }
    },
    //订单列表-待操作-评论/追评
    async confirmShare(id) {
      if (this.shareOrderImg == '') {
        uni.showToast({
          title: '请先上传评价截图',
          icon: 'none',
        });
        return;
      }
      let params = {
        buyerPlatformId: process.env.VUE_APP_PLATFORMID,
        id: id,
        commentType: this.commentType,
        commentImg: this.shareOrderImg,
      };
      const { code, data } = await addComment(params);
      if (code != 200) return;
      uni.$u.toast('提交成功');
      setTimeout(() => {
        this.$Router.push({
          name: 'order',
          params: {
            searchType: this.commentType == 1 ? 1 : 4,
          },
        });
      }, 800);
    },
    //订单继续 - 获取订单确认信息
    async continueTo(id) {
      const { code, data } = await orderList({ searchType: 4, searchKey: id });
      if (code != 200) return;
      this.info = data.records[0];
    },
    //上传评价截图
    uploadPhoto(type) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          const { code, data } = await postFile(file, 'order');
          if (code != 200) return;
          switch (type) {
            case 'shareImg':
              this.shareOrderImgUrl = data.httpUrl;
              this.shareOrderImg = data.path;
              break;
          }
        },
      });
    },
  },
};
</script>

<style></style>
